<template>
	<kb-layout>
		<view class="login_container">
			<view class="headlogo">
				<u-image :src="ee.account?.logo" width="60" height="60"></u-image>
			</view>
			<!-- 头部背景图结束 -->
			<div class="login_container_content">
				<div class="login_container_content_title">
					<view class="name">绑定</view>
					<view class="span">手机号绑定登录</view>
				</div>

				<div class="login_container_content_form">

					<view class="slot-content" style="width: 100%;">
						<up-form labelPosition="left" :model="loginData" ref="form1">
							<up-form-item label="" prop="mobile" ref="item1">
								<up-input prefixIcon="phone" prefixIconStyle="font-size: 16px; "
									v-model="loginData.mobile" border="surround" placeholder="请输入您的手机号码"
									:custom-style="{borderColor:''}"></up-input>
								<!-- #ifdef MP-WEIXIN -->								
								<template #right>
									<view style="padding-left: 10px;">
										<up-button text="自动获取" open-type='getPhoneNumber'
											@getphonenumber="onGetphonenumber"
											class="u-button u-reset-button u-button--default u-button--square"></up-button>
									</view>
								</template>
								<!-- #endif -->
							</up-form-item>
							
							<up-form-item>
								<up-input prefixIcon="email" prefixIconStyle="font-size: 16px; "
									v-model="loginData.verycode" border="surround" placeholder="请输入短信验证码"
									:custom-style="{borderColor:''}">
								<template #suffix>
									<up-code
											ref="uCodeRef"
											@change="codeChange"
											seconds="60"
											startText="点击获取验证码"
											changeText="X秒后重新获取"
										></up-code>
										<up-button
											@tap="getCode"
											:text="tips" 										 
											:plain="true"
											size="mini"
										></up-button>
								</template>
								</up-input>
							</up-form-item>
						</up-form>
					</view>


					<div class="login_container_content_form_agreen privacy_agreement">
						<div class="privacy_agreement_content">
							<checkbox-group @change="checkoutPrivaey">
								<checkbox class="checkbox" :value="isCheckEd" />
								<span>请阅读并勾选</span>
								<text @click="showPrivaey">《隐私协议》</text>
							</checkbox-group>
						</div>
					</div>
				</div>

				<div class="login_container_content_handle">
					<div class="login_primary_button" @click="handleLogin">确定提交</div>
				</div>

			</div>

			<kb-footer :color="ee.primayColor"></kb-footer>
		</view>
	</kb-layout>
</template>

<script>
	import util from '/common/tools/utils';
	import loginInput from './component/loginInput.vue';
	import {
		navigateTo,
		Modal,
		Toast,
		cache,
		navigateBack
	} from '/common/tools/uniApi.js';


	export default {
		components: {
			loginInput
		},
		data() {
			return {
				loginData: {
					mobile: '',
					verycode: ''
				},
				cid: '',
				isCheckEd: '1', // 是否选中隐私协议
				isCheckEdArr: [],
				tips: '点击获取验证码'
			};
		},
		onLoad() {

		},
		onUnload() {

		},
		methods: {
			onGetphonenumber(e) {				 
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					this.kbutil.getModuleData("webfront/getphone", {
						encrypdata: e.detail.encryptedData,
						ivdata: e.detail.iv,
						code: e.detail.code,
					}).then(ret => {
						if (ret.code) {
							uni.showModal({
								content: "请输入手机号"
							})
						} else {
							this.loginData.mobile = ret.data.phoneNumber
						}
					})
				}

			},
			change(e) {
				console.log(e)
			},
			async handleLogin() {
				if (!this.isCheckEdArr.length) {
					Toast('请勾选隐私协议');
					return;
				}
				//#ifdef APP-PLUS

				//#endif 
				this.kbutil.getModuleData("webfront/bindMobile", this.loginData).then(ret => {
					//更改绑定状态  
					cache.set('openid', ret.openid);
					this.$refs.form1.resetFields();
					navigateBack(1);
				})
			},
			// 勾选隐私协议
			checkoutPrivaey(e) {
				this.isCheckEdArr = e.detail.value;
			},
			// 跳转隐私协议
			showPrivaey() {
				navigateTo(1, '/pages/paper/paper?type=privacy');
			},
			codeChange(text){
				console.log(text)
				this.tips = text;
			},
			getCode(){
				let uCodeRef = this.$refs['uCodeRef'];
				console.log(uCodeRef)
				 if (uCodeRef.canGetCode) {
				    // 模拟向后端请求验证码
				    uni.showLoading({
				      title: '正在获取验证码',
				    });
					util.getModuleData("webfront/sendsms", this.loginData).then(ret=>{
						 uni.hideLoading();
						  uni.$u.toast('验证码已发送');
						  uCodeRef.start();
					}) ;
				  } else {
				    uni.$u.toast('倒计时结束后再发送');
				  }
			}
		}
	};
</script>

<style scoped lang="less">
	body {
		background: #fff;
	}

	.headlogo {
		padding-top: 30px;
		display: flex;
		justify-content: center;
	}

	.login_container {
		background: #fff;

		&_content {

			padding: 30px;
			background: #fff;

			border-radius: 20rpx;

			&_title {
				text-align: left;
				margin-bottom: 54rpx;

				.name {

					font-size: 18px;
					font-weight: 600;
				}

				.span {
					font-size: 14px;
					color: #999;
				}

			}

			&_handle {
				margin-top: 115rpx;

				.login_primary_button {
					font-size: 15px;
					width: 100%;
					height: 82rpx;
					background: linear-gradient(-90deg, #ffa011, #ff5519);
					border-radius: 4px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
				}
			}

			&_form {

				&_input {
					border-radius: 49px;
					border: 1px solid #dbdbdb;
					margin-bottom: 20px;
					padding: 0px 20px;
				}
			}

			// content end
		}
	}

	.privacy_agreement {
		margin-top: 30rpx;

		&_content {
			font-size: 28rpx;
			color: #999;

			.checkbox {
				transform: scale(0.7);
			}

			text {
				color: #ffa011;
			}
		}
	}

	.login-to-set-domin-name {
		font-size: 20rpx;
		padding-top: 40rpx;
		text-align: center;
	}
</style>